<template>
    <div class="guide">
       <img class="g-img" src="../wr.jpg" alt="">
      

        <p class="countdown" @click="gotoMovie">
            跳过 {{count}} S
        </p>
    </div>
</template>


<script>
import axios from "axios"
var timer = null;
export default {
    name:"guide",
    data(){
        return {
            
            count:5,
          
            
        }
    },
    methods:{
        gotoMovie(){
            this.$router.push({name:"home"})
        }
    },
    mounted(){
        timer = setInterval(()=>{
            if(this.count>0){
                this.count--
            }else{
                clearInterval(timer);
                timer = null
                this.$router.push({name:"home"})
            }
        },1000)

        if(localStorage.appvisitcount){
            localStorage.appvisitcount++ 
            if(localStorage.appvisitcount>100){
                 this.$router.push({name:"movie"})
            }
        }else{
            // 第一次 
            localStorage.appvisitcount = 1 
        }
    }
}
</script>


<style lang="scss" scoped>
.guide{
    width:100%;
    height:100%;
    position: relative;
   .g-img{
        width:100%;
        height:100%;
    }
    .my-swipe{
        position: relative;
    }
    .g-btn{
        position: absolute;
        bottom:100px;
        left:50%;
        transform: translateX(-50%);
        z-index:10;
    }
    .countdown{
        width:70px;
        height:28px;
        position: absolute;
        z-index:20;
        right:20px;
        top:20px;
        border-radius: 13px;
        border:1px solid #fff;
        background: rgba(0,0,0,0.4);
        color:#fff;
        text-align: center;
        line-height: 28px;

    }
}
</style>